<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 100px;
        height: 10px;
        background-color: red;
        /* box-shadow :水平方向偏移量 垂直方向 模糊程度 扩展程度 颜色  是否具有内阴影(inset)
        当有多个盒子阴影时，需要以逗号分隔 写多个
        css3产生的一些效果永远不占位
        模糊盒子 不占位 但是有


        inset 默认没有 外阴影，如果加上就是内阴影



        */
        box-shadow: 10px 10px 10px 10px pink, 10px 10px 10px 10px orange;
    }

    .box1 {
        width: 100px;
        height: 100px;
        background-color: green;
    }

    .box2 {
        width: 100px;
        height: 100px;
        background-color: orange;
        box-shadow: 10px 10px 0px 0px pink;
    }

    /* 
    模糊盒子
    当元素的宽或者高有一方为0
    当无模糊程度和扩展程度时，阴影的大小和盒子的大小是等大。

    
    
    */
    .box3 {
        width: 100px;
        height: 100px;
        background-color: #ccc;
        border-radius: 50%;
        box-shadow: 10px 10px 0px 0px black inset;
    }
</style>

<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>